<template>
  <div :class="{ 'hidden': hidden }" class="pagination-container">
    <el-pagination
        v-model:currentPage="page"
        :background="background"
        :layout="layout"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
const prop = defineProps({
  total: {
    type: Number,
    required: true
  },
  page: {
    type: Number as () => number,
    required: true,
    default: 1
  },
  pageSize: {
    type: Number as () => number,
    required: true,
    default: 10
  },
  pageSizes: {
    type: Array as () => Array<number>,
    default() {
      return [10, 20, 30, 50]
    }
  },
  layout: {
    type: String as () => string,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  background: {
    type: Boolean as () => boolean,
    default: true
  },
  autoScroll: {
    type: Boolean as () => boolean,
    default: true
  },
  hidden: {
    type: Boolean as () => boolean,
    default: false
  }
})
const emit = defineEmits(['pagination', 'update:page', 'update:page-size'])

function handleSizeChange(val: number) {
  if (prop.autoScroll) {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    })
  }
  emit('update:page-size', val)
  emit('update:page', 1)
  emit('pagination')
}

function handleCurrentChange(val: number) {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  })
  emit('update:page', val)
  emit('pagination')
}
</script>

<style scoped>
.pagination-container {
  text-align: right;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.pagination-container.hidden {
  display: none;
}
</style>
